<template>
	<view class="DownloadProgressBar">
		<button :loading="isLoading" class="DownloadProgressBar-button">
			<text class="DownloadProgressBar-button-label">{{ hintLabel }}</text>

			<view
				@click.prevent.stop
				class="DownloadProgressBar-button-progress"
				:style="{
					width: styleTransform
				}"
			/>
		</button>
	</view>
</template>

<script>
export default {
	name: 'DownloadProgressBar',

	props: {
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},

	computed: {
		singleDisplacement() {
			const { isLoading } = this;

			return 1 / isLoading;
		},

		isLoading() {
			const { list } = this;

			return list.length;
		},

		styleTransform() {
			const { list, singleDisplacement } = this;

			const defaultTranslateX = 100;
			let translateX = 0;

			list.some((item) => {
				const { progress = 0, fileTask } = item;

				if (!fileTask) {
					return true;
				}

				translateX += singleDisplacement * progress;
			});

			return `${translateX}%`;
			// return `translateX(${translateX - defaultTranslateX}%) translate3d(0, 0 , 0)`;
		},

		hintLabel() {
			const { list, isLoading } = this;
			const formatList = list.filter((item) => item.status === 'success').length;

			if (formatList === isLoading) {
				return '下载完成';
			}

			return `素材下载中 · 已完成 ${formatList}/${isLoading}`;
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/style/common.scss';

.DownloadProgressBar {
	overflow: hidden;
	border-radius: 24rpx;
	width: calc(100vw - 56rpx);

	&-button {
		@include Db_commonButton(80rpx, 24rpx);

		overflow: hidden;
		background: rgba(0, 0, 0, 0.12);

		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		&-label {
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			margin-left: 14rpx;

			position: relative;
		}

		&::before {
			position: relative;
		}

		&-progress {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			width: 0;
			height: 80rpx;
			border-radius: 24rpx;
			background: #57ae59;

			transition: width 0.3s;
			transform: translate3d(0, 0, 0);
			// transform: translateX(-100%) translate3d(0, 0, 0);
		}

		&:active {
			background: rgba(0, 0, 0, 0.12);
		}
	}
}
</style>
